<template>
	<a-card>
		<div
			style="
				display: flex;
				justify-content: flex-end;
				margin-bottom: 20px;
			"
		>
			<a-button type="primary" icon="plus" @click="showModal()">{{
				$t('user.v146')
			}}</a-button>
		</div>
		<a-table
			:pagination="false"
			:data-source="listData"
			:rowKey="(record) => record.Id"
		>
			<a-table-column key="Id" data-index="Id">
				<span slot="title" class="min-w-90p">{{
					$t('user.verification-code.required111566110577115')
				}}</span>
			</a-table-column>
			<a-table-column key="DateLevel">
				<span slot="title" class="min-w-90p">{{
					$t('user.verification-code.required111566110577129')
				}}</span>
				<template slot-scope="text, record">
					<span>{{
						isLang
							? record.DateLevel.split('/')[0]
							: record.DateLevel.split('/')[1]
					}}</span>
				</template>
			</a-table-column>
			<a-table-column
				key="DateIllustrate"
				:title="$t('user.verification-code.required111566110577116')"
			>
				<template slot-scope="text, record">
					<span>{{
						isLang ? record.DateIllustrate : record.DateIllustrate
					}}</span>
				</template>
			</a-table-column>
			<a-table-column
				key="action"
				:title="$t('app.setting.othersettings')"
			>
				<template slot-scope="text, row">
					<span>
						<a-button type="link" @click="showModal(row.Id)">{{
							$t('user.verification-code.required111566147')
						}}</a-button>
						<a-popconfirm
							:title="
								$t(
									'user.verification-code.required111566110577223'
								)
							"
							:ok-text="$t('user.verification-code.required1166')"
							:cancel-text="$t('user.email.required11')"
							@confirm="handleClickDelete(row.Id)"
							@cancel="cancel"
						>
							<a-button type="link">{{
								$t('app.setting.copy')
							}}</a-button>
						</a-popconfirm>
					</span>
				</template>
			</a-table-column>
		</a-table>
		<!-- 分页 -->
		<a-pagination
			size="small"
			v-model="queryForm.page"
			:total="total"
			hideOnSinglePage
			:pageSize.sync="queryForm.pageSize"
			@change="getList"
		/>
		<!-- <a-pagination size="small" v-model="queryForm.page" :total="total" hideOnSinglePage
    :pageSize.sync="queryForm.pageSize" @change="getList" /> -->
		<a-drawer
			:title="modalTitle"
			placement="right"
			:closable="false"
			:visible="modalVisible"
			@close="closeDrawer"
			:width="500"
		>
			<a-form v-model="addForm" labelAlign="right">
				<a-form-item
					:label="
						$t('user.verification-code.required111566110577115')
					"
					v-show="addForm.id"
					class="sp-item"
				>
					{{ addForm.id }}
				</a-form-item>
				<a-form-item
					:label="
						$t('user.verification-code.required111566110577129')
					"
				>
					<a-input
						v-model="addForm.DateLevel"
						:placeholder="$t('user.v153')"
				/></a-form-item>
				<a-form-item
					:label="
						$t('user.verification-code.required111566110577116')
					"
				>
					<a-input
						v-model="addForm.DateIllustrate"
						:placeholder="$t($t('user.v152'))"
				/></a-form-item>
			</a-form>
			<div
				:style="{
					position: 'absolute',
					right: 0,
					bottom: 0,
					width: '100%',
					borderTop: '1px solid #e9e9e9',
					padding: '10px 16px',
					background: '#fff',
					textAlign: 'center',
					zIndex: 1,
				}"
			>
				<a-button style="margin-right: 8px" @click="closeDrawer">{{
					$t('user.email.required11')
				}}</a-button>
				<a-button type="primary" @click="subAddForm">{{
					$t('user.verification-code.required1166')
				}}</a-button>
			</div>
		</a-drawer>
	</a-card>
</template>

<script>
import {
	dataList,
	dataCreate,
	dataChange,
	dataDelete,
	dataDetails,
} from '@/api/ytdg'
const columns = [
	{
		title: '序号',
		dataIndex: 'Id',
		align: 'center',
	},
	{
		title: '数据等级',
		dataIndex: 'DateLevel',
		align: 'center',
	},
	{
		title: '等级说明',
		dataIndex: 'DateIllustrate',
		align: 'center',
	},
	{
		title: '操作',
		width: '150px',
		dataIndex: '',
		align: 'center',
		scopedSlots: { customRender: 'action' },
	},
]
export default {
	data() {
		return {
			columns,
			modalVisible: false,
			modalTitle: '',
			isLang: localStorage.getItem('lang').includes('zh-CN'),
			listData: [],
			total: 0,
			queryForm: {
				page: 1,
				pageSize: 10,
			},
			addForm: {
				DateIllustrate: undefined,
				DateLevel: undefined,
			},
		}
	},
	created() {
		this.getList()
	},
	mounted() {
		let that = this
		window.addEventListener('setItemEvent', function (e) {
			if (e.key == 'lang') {
				let lang = JSON.parse(e.value)
				console.log(lang)
				if (lang == 'zh-EN') {
					that.isLang = false
				} else {
					that.isLang = true
				}
			}
		})
	},
	// mounted(){
	//   let that=this;
	//   window.addEventListener('setItemEvent', function(e) {
	//     if(e.key=='lang'){
	//       let lang= JSON.parse(e.value)
	//       console.log(lang);
	//       if(lang == 'zh-EN'){
	//         that.isLang=false;
	//       }else{
	//         that.isLang=true
	//
	//       }
	//     }
	//   })
	// },
	methods: {
		getList() {
			dataList(this.queryForm).then((res) => {
				this.listData = res.data.Lists
				this.total = res.data.Total
			})
		},
		showModal(id) {
			if (id) {
				this.modalTitle = this.$t(
					'user.verification-code.required111566110577130'
				)
				dataDetails({ id }).then((res) => {
					this.addForm = res.data[0]
					this.addForm.id = id
				})
			} else {
				this.modalTitle = this.$t(
					'user.verification-code.required111566110577131'
				)
			}
			this.modalVisible = true
		},
		// 关闭抽屉
		closeDrawer() {
			this.addForm = {
				DateIllustrate: undefined,
				DateLevel: undefined,
				id: undefined,
			}
			this.modalVisible = false
		},

		// 新增
		subAddForm() {
			if (this.addForm.id) {
				dataChange(this.addForm).then(
					() => {
						this.$message.success(
							this.$t(
								'user.verification-code.required111566110577229'
							)
						)
						this.getList()
						this.closeDrawer()
					},
					(err) => {
						this.$message.error(err)
					}
				)
			} else {
				dataCreate(this.addForm).then(
					(res) => {
						this.$message.success(
							this.$t(
								'user.verification-code.required111566110577230'
							)
						)
						this.getList()
						this.closeDrawer()
					},
					(err) => {
						this.$message.error(err)
					}
				)
			}
		},

		// 删除
		handleClickDelete(id) {
			dataDelete({ id }).then((res) => {
				this.$message.success(
					this.$t('user.verification-code.required111566110577133')
				)
				this.getList()
			})
		},
		cancel() {
			this.$message.warning(
				this.$t('user.verification-code.required111566110577231')
			)
		},
	},
}
</script>
<style lang="less" scoped>
:deep(.ant-drawer-body) {
	min-height: 200px !important;
	padding-bottom: 100px;
	.delete-button {
		position: absolute;
		right: 54px;
		top: 0;
	}
}
.ant-pagination {
	float: right;
}

/deep/ .ant-form-item-label {
	display: inline-block;
	overflow: visible !important;
	line-height: 39.9999px;
	white-space: nowrap;
	text-align: right;
	vertical-align: middle;
}
</style>
